<template>
	<div class="recommend">
		<div class="hotTitle">热门推荐</div>
		<div class="recommendwrap" v-for="item of recommend" :key="item.id">
			<div class="recommendImg">
				<img class="imgContent" :src="item.imgUrl">
			</div>
			<span class="recommendTitle">{{item.title}}</span>
			<span class="recommendDesc">{{item.desc}}</span>
		</div>
	</div>
</template>

<script>
export default{
	props:{
		recommend:Array
	}
}
</script>

<style lang="stylus" scoped>

.recommend
 width:100%
 overflow:hidden
.hotTitle
 width:100%
 height:1rem
 line-height:1rem
 background:#ccc
 padding:.1rem 0 .1rem .4rem
 font-size:.42rem
.recommendwrap
 width:100%
 height:3rem
 padding:.2rem 0 .1rem .3rem
 
 position:relative
.recommendImg
 width:3rem
 height:3rem
 float:left

.imgContent
 width:3rem
 height:3rem
 
.recommendTitle
 display:block
 float:left
 font-size:.45rem
 margin-top:.2rem
 margin-left:.2rem
.recommendDesc
 display:block
 position:absolute
 top:1.1rem
 left:3.5rem
 padding-right:.4rem
 font-size:.4rem
 color:#ccc
 
</style>